<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>报表统计</div>
        <div class="layui-card-body">
            <div id="echarts-records" style="width: 100%;min-height:500px"></div>
        </div>
    </div>
</div>
</body>
<script>
    import * as echarts from 'echarts';
    import 'echarts-gl';

    var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;
    var optionRecords = {
        backgroundColor: '#000',
        globe: {
            baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
            heightTexture: ROOT_PATH + "/data-gl/asset/bathymetry_bw_composite_4k.jpg",
            displacementScale: 0.2,
            shading: 'realistic',
            environment: ROOT_PATH + '/data-gl/asset/starfield.jpg',
            realisticMaterial: {
                roughness: ROOT_PATH + '/asset/get/s/data-1497599804873-H1SHkG-mZ.jpg',
                metalness: ROOT_PATH + '/asset/get/s/data-1497599800643-BJbHyGWQW.jpg',
                textureTiling: [8, 4]
            },
            postEffect: {
                enable: true
            },
            viewControl: {
                autoRotate: false
            },
            light: {
                main: {
                    intensity: 2,
                    shadow: true
                },
                ambientCubemap: {
                    texture: ROOT_PATH + '/data-gl/asset/pisa.hdr',
                    exposure: 2,
                    diffuseIntensity: 2,
                    specularIntensity: 2
                }
            }
        }
    };

    option && myChart.setOption(option);
</script>
</html>